<template>
	<div class="login-contain">
		<div class="header">
			<div class="header-logo"><img src="../assets/index/logo.png" alt="" /></div>
		</div>
		<div class="login-box">
			<!-- tab切换 -->
			<div class="tab-box">
				<div v-for="(item, index) in tabsLits" :key="index">
					<div :class="selTabs == item.id ? 'active-tabs' : ''" @click="tabsClick(item.id)">
						{{ item.name }}
						<div class="tab-underline"></div>
					</div>
				</div>
			</div>
			<!-- 账号登录 -->
			<div class="tab-card" v-show="selTabs == 1">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="tab-card">
					<el-form-item label="账号" prop="username"><el-input clearable type="text" v-model="ruleForm.username" placeholder="请输入您的账号"></el-input></el-form-item>
					<el-form-item label="密码" prop="password" style="margin-bottom: 0.69rem">
						<el-input
							type="password"
							clearable
							v-model="ruleForm.password"
							@keyup.enter.native="logins('ruleForm')"
							show-password
							placeholder="请输入您的登录密码"
						></el-input>
					</el-form-item>
					<!-- <el-form-item label="验证码" prop="passwords" style="margin-bottom: 0.69rem">
						<div style="display: flex">
							<el-input placeholder="请输入验证码" v-model="ruleForm.passwords"></el-input>
							<Sidentify></Sidentify>
						</div>
					</el-form-item> -->
				</el-form>
				<el-button type="primary" :loading="loading" @click="logins('ruleForm')">
					<span v-if="!loading">登录</span>
					<span v-else>登录中...</span>
				</el-button>
				<div class="forgetPassWord"><span style="cursor: pointer;" @click="forgetPassWord">忘记密码</span></div>
				<div class="loginInfo">
					<span class="noAccount">没有账号?</span>
					<span class="rigister" @click="rigister">立即注册</span>
				</div>
			</div>
			<div class="tab-card" v-show="selTabs == 0">
				<el-form :model="ruleFormMail" :rules="rulesMail" ref="ruleFormMail" class="tab-card">
					<el-form-item label="邮箱号" prop="email"><el-input clearable type="text" v-model="ruleFormMail.email" placeholder="请输入您的邮箱号"></el-input></el-form-item>
					<el-form-item label="验证码" prop="code" style="margin-bottom: 0.69rem">
						<div style="display: flex">
							<el-input placeholder="请输入验证码" clearable @keyup.enter.native="loginsMail('ruleFormMail')" maxlength="6" v-model="ruleFormMail.code"></el-input>
							<el-button class="register-btn" v-show="show" @click="getCodeBtn">获取验证码</el-button>
							<el-button class="register-btn" v-show="!show">{{ count }}</el-button>
						</div>
					</el-form-item>
				</el-form>
				<el-button type="primary" :loading="loadingMail" @click="loginsMail('ruleFormMail')">
					<span v-if="!loadingMail">登录</span>
					<span v-else>登录中...</span>
				</el-button>
				<div class="forgetPassWord"><span style="cursor: pointer;" @click="forgetPassWord">忘记密码</span></div>
				<div class="loginInfo">
					<span class="noAccount">没有账号?</span>
					<span class="rigister" @click="rigister">立即注册</span>
				</div>
			</div>
		</div>
		<!-- <img src="../assets/logoin.png" alt="" /> -->
	</div>
</template>

<script>
// import Sidentify from '@/components/Sidentify'; //**引入验证码组件**
import { qrcode, mansystem } from '@/api/api.js';
import { setItem } from '@/utils/storage.js';
import { sendEmail } from '@/api/api';
export default {
	// components: {
	// 	Sidentify
	// },
	data() {
		var validateUsername = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入用户名'));
			} else {
				callback();
			}
		};
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				callback();
			}
		};
		//邮箱登录
		const validateEmail = (rule, value, callback) => {
			if (value == '') {
				callback(new Error('请输入邮箱号'));
			} else if (!/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(value)) {
				callback(new Error('请输入正确的邮箱格式'));
			} else {
				callback();
			}
		};
		const validateCode = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入验证码'));
			}
			callback();
		};
		return {
			show: true,
			count: '',
			//登录状态
			loading: false,
			loadingMail: false,
			//账号登录
			ruleForm: {
				username: null,
				password: null
			},
			//邮箱登录
			ruleFormMail: {
				email: '',
				code: ''
			},
			//tabs切换自定义
			tabsLits: [{ name: '邮箱登录', id: 0 }, { name: '账号登录', id: 1 }],
			//tabs默认账号登录
			selTabs: 1,
			rules: {
				username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
				password: [{ required: true, validator: validatePass, trigger: 'blur' }]
			},
			rulesMail: {
				email: [{ required: true, validator: validateEmail, trigger: 'blur' }],
				code: [{ required: true, validator: validateCode, trigger: 'blur' }]
			},
			rid: '',
			rcode: ''
		};
	},
	created() {},
	mounted() {
		// this.picker = sessionStorage.getItem('picker');
	},
	methods: {
		//切换tabs事件
		tabsClick(val) {
			this.selTabs = val;
		},
		//密码登录
		login() {
			let formData = new FormData();
			formData.append('username', this.ruleForm.username);
			formData.append('password', this.ruleForm.password);
			formData.append('type', '0');
			this.loading = true;
			qrcode(formData).then(res => {
				if (res.code == 1001) {
					setItem('token', res.data.token);
					this.msgSuccess('登录成功');

					let formData = new FormData();
					formData.append('token', res.data.token);
					mansystem(formData).then(res => {
						if (res.code == 1001) {
							setItem('userInfo', res.data);
						}
					});

					setTimeout(() => {
						this.$router.replace({ path: '/index' });
						this.loading = false;
					}, 1500);
				} else {
					this.loading = false;
				}
			});
		},
		//账号登录
		logins(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.login();
				} else {
					return false;
				}
			});
		},
		//验证码接口
		getCode() {
			let formData = new FormData();
			formData.append('email', this.ruleFormMail.email);
			sendEmail(formData).then(res => {
				if (res.code == 1001) {
					this.msgSuccess(res.msg);
					const TIME_COUNT = 60;
					if (!this.timer) {
						this.count = TIME_COUNT;
						this.show = false;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
							} else {
								this.show = true;
								clearInterval(this.timer);
								this.timer = null;
							}
						}, 1000);
					}
				}
			});
		},
		//获取验证码
		getCodeBtn() {
			if (this.ruleFormMail.email == null) {
				this.msgError('请先输入邮箱');
			} else {
				this.getCode();
			}
		},
		//邮箱登录
		loginsMail(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					let formData = new FormData();
					formData.append('email', this.ruleFormMail.email);
					formData.append('code', this.ruleFormMail.code);
					formData.append('type', '1');
					this.loadingMail = true;
					qrcode(formData).then(res => {
						if (res.code == 1001) {
							setItem('token', res.data.token);
							this.msgSuccess('登录成功');

							let formData = new FormData();
							formData.append('token', res.data.token);
							mansystem(formData).then(res => {
								if (res.code == 1001) {
									setItem('userInfo', res.data);
								}
							});

							setTimeout(() => {
								this.$router.replace({ path: '/index' });
								this.loadingMail = false;
							}, 1500);
						} else {
							this.loadingMail = false;
						}
					});
				} else {
					return false;
				}
			});
		},
		//注册账号
		rigister() {
			this.$router.push({
				path: '/registerUser'
			});
		},
		//忘记密码
		forgetPassWord() {
			this.$router.push({
				path: '/ForgetPasswords'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/scss/login.scss';
.register-btn {
	background-color: #146ac1;
	color: #ffffff;
	width: 7rem;
	margin-left: 0.2rem;
}
</style>
